<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-05-08 17:50:09
 * @LastEditors: oooh
 * @LastEditTime: 2024-08-06 13:57:49
 * @FilePath: \Civil_Servant_Performance_PC\src\views\work\daily-performance\index.vue
-->
<template>
  <div class="app-container">
    <el-row>
      <el-col>
        <el-select v-model="queryParams.year" placeholder="请选择" @change="handleYearChange">
          <el-option v-for="item in dict.type.biz_work_year_list" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-select v-model="queryParams.quarter" placeholder="请选择" class="ml-10" @change="handleQuarterChange">
          <el-option v-for="item in quarterOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
        <el-cascader
          v-if="role !== 'cadre'"
          class="ml-10"
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-all-levels="false"
          :props="{ checkStrictly: true, value: 'deptId', label: 'deptName', checkStrictly: true, emitPath: false }"
          placeholder="选择站办所"
          filterable
          @change="handleDeptChange"
          ref="CascaderRef"
        ></el-cascader>
        <el-select v-if="!checkRole(['cadre'])" v-model="queryParams.civilServantId" placeholder="请选择" class="ml-10" filterable @change="getList">
          <el-option v-for="item in civilOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="text-banner">
      <span>平时考核登记表</span>
      <el-button class="ml-10" size="mini" type="primary" circle icon="el-icon-refresh" plain @click="handleRefresh" />
    </div>
    <div class="mb-10 flex justify-end">
      <el-button
        type="warning"
        size="mini"
        plain
        @click="handleSaveOrSubmit('save')"
        icon="el-icon-document"
        :disabled="!checkInputVisible() || !tableForm.id"
        >保存</el-button
      >
      <el-button
        type="primary"
        size="mini"
        plain
        @click="handleSaveOrSubmit('submit')"
        icon="el-icon-s-claim"
        :disabled="!checkInputVisible() || !tableForm.id"
        >提交登记表</el-button
      >
    </div>
    <div class="table-container" v-loading="tableLoading">
      <div class="table-title">平时考核登记表</div>
      <p class="table-subTitle">({{ this.queryParams.year }}年第{{ this.queryParams.quarter }}次)</p>
      <table v-if="tableForm.id">
        <tr>
          <td>姓名</td>
          <td>
            {{ tableForm.civilServantName }}
          </td>
          <td>职务</td>
          <td>
            {{ tableForm.positionDictName }}
          </td>
        </tr>
        <tr>
          <td>岗位类别<br />编制性质</td>
          <td>{{ tableForm.workNatureDictName }}</td>
          <td>出勤情况</td>
          <td>
            <div class="flex">
              在办 <el-input v-model="tableForm.workDay" class="number-input" v-if="checkInputVisible()"></el-input>
              <span v-else>{{ tableForm.workDay }}</span> 天，外出
              <el-input v-model="tableForm.outDay" class="number-input" v-if="checkInputVisible()"></el-input>
              <span v-else>{{ tableForm.outDay }}</span> 天
            </div>
            <div class="flex">
              公休 <el-input v-model="tableForm.restDay" class="number-input" v-if="checkInputVisible()"></el-input>
              <span v-else>{{ tableForm.restDay }}</span> 天，请假
              <el-input v-model="tableForm.leaveDay" class="number-input" v-if="checkInputVisible()"></el-input>
              <span v-else>{{ tableForm.leaveDay }}</span> 天
            </div>
          </td>
        </tr>
        <tr>
          <td>阶段性目标任务</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.targetTask"
              placeholder="阶段性目标任务"
              :rows="3"
              :autosize="{ minRows: 3, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p class="text-left pre-wrap" v-else>{{ tableForm.targetTask || '-' }}</p>
          </td>
        </tr>
        <tr>
          <td>工作完成情况<br />（含临时交办任务）</td>
          <td colspan="3">
            <p class="text-left">(一)重点工作</p>
            <el-input
              type="textarea"
              placeholder="重点工作完成情况"
              v-model="tableForm.importantWorkCompletionSituation"
              :rows="3"
              :autosize="{ minRows: 3, maxRows: 10 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="pl-10 text-left pre-wrap">{{ tableForm.importantWorkCompletionSituation || '-' }}</p>
            <p class="text-left">(二)中心工作</p>
            <el-input
              type="textarea"
              placeholder="中心工作完成情况"
              v-model="tableForm.centerWorkCompletionSituation"
              :rows="3"
              :autosize="{ minRows: 3, maxRows: 10 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="pl-10 text-left pre-wrap">{{ tableForm.centerWorkCompletionSituation || '-' }}</p>
            <p class="text-left">(三)其他工作</p>
            <el-input
              type="textarea"
              placeholder="其他工作完成情况"
              v-model="tableForm.otherWorkCompletionSituation"
              :rows="3"
              :autosize="{ minRows: 3, maxRows: 10 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="pl-10 text-left pre-wrap">{{ tableForm.otherWorkCompletionSituation || '-' }}</p>
          </td>
        </tr>
        <tr>
          <td>政治素质<br />考察评价</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.politicalQualityEvaluate"
              placeholder="政治素质考察评价"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="pl-10 text-left pre-wrap">{{ tableForm.politicalQualityEvaluate || '-' }}</p>
          </td>
        </tr>
        <tr>
          <td>站办所负责人<br />审核备注</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.deptManagerAuditRemarks"
              placeholder="站办所负责人审核备注"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="pl-10 text-left pre-wrap">{{ tableForm.deptManagerAuditRemarks || '-' }}</p>
          </td>
        </tr>
        <tr>
          <td>绩效管理得分</td>
          <td colspan="3">
            <ul v-if="checkRole(['cadre'])">
              <li>绩效管理等次：{{ tableForm.personalQuarterScoreCollect.gradeDictName || '-' }}</li>
            </ul>
            <ul v-else>
              <li v-for="item in tableForm.personalQuarterScoreCollect.detailsJson" :key="item.label">
                {{ item.label }}：{{ item.score || '-' }} 分
              </li>
              <li>考评等次：{{ tableForm.personalQuarterScoreCollect.gradeDictName || '-' }}</li>
              <li>总得分：{{ tableForm.personalQuarterScoreCollect.score || '-' }}</li>
            </ul>
          </td>
        </tr>
        <tr>
          <td>主管领导评价<br />及<br />等次建议</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.partLeaderAuditRemarks"
              placeholder="主管领导评价及等次建议"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="text-left pre-wrap">{{ tableForm.partLeaderAuditRemarks }}</p>

            <p class="text-right">
              <el-date-picker
                class="date-input"
                v-model="tableForm.partLeaderAuditDate"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-if="checkInputVisible()"
              >
              </el-date-picker>
              <span v-else>{{ tableForm.partLeaderAuditDate }}</span>
            </p>
          </td>
        </tr>
        <tr>
          <td>单位主要领导<br />或领导班子<br />或组织人事<br />部门审定意见</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.mainLeaderAuditRemarks"
              placeholder="审定意见"
              :rows="1"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="text-left pre-wrap">{{ tableForm.mainLeaderAuditRemarks }}</p>

            <p class="text-right">
              <el-date-picker
                class="date-input"
                v-model="tableForm.mainLeaderAuditDate"
                type="date"
                :clearable="false"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                v-if="checkInputVisible()"
              >
              </el-date-picker>
              <span v-else>{{ tableForm.mainLeaderAuditDate }}</span>
            </p>
          </td>
        </tr>
        <tr>
          <td>备注</td>
          <td colspan="3">
            <el-input
              type="textarea"
              v-model="tableForm.remarks"
              :rows="1"
              placeholder="其他备注"
              :autosize="{ minRows: 1, maxRows: 6 }"
              v-if="checkInputVisible()"
            ></el-input>
            <p v-else class="text-left pre-wrap">{{ tableForm.remarks }}</p>
          </td>
        </tr>
      </table>
      <p v-if="!tableForm.id && !tableLoading" style="font-size: 30px" class="color-info">暂无申报数据</p>
    </div>
  </div>
</template>

<script>
import { quarterFormat } from '@/utils/quarter.js'
import { deptTreeSelect } from '@/api/system/user'
import { list as listCivil } from '@/api/organization/civil-servant'
import { listTable, edit } from '@/api/work/daily-performance'
import dayjs from 'dayjs'
import { mapGetters } from 'vuex'
import { checkRole } from '@/utils/permission' // 权限判断函数

export default {
  name: 'daily-performance',
  dicts: ['biz_work_year_list'],
  props: {},
  components: {},
  data() {
    return {
      tableLoading: false,
      quarterOptions: [],
      deptOptions: [],
      tableList: [],
      tableForm: {},
      civilOptions: [],
      role: '',
      queryParams: {
        year: '',
        quarter: '',
        deptId: '',
        civilServantId: ''
      }
    }
  },
  computed: {
    ...mapGetters(['roles'])
  },
  watch: {},
  created() {
    if (this.$auth.hasRoleOr(['cadre', 'basic'])) {
      this.role = 'cadre'
    } else if (this.$auth.hasRole('deptManager')) {
      this.role = 'dept'
      this.queryParams.personalSubmitMark = true
    } else if (this.$auth.hasRole('performanceOffice')) {
      this.role = 'jxb'
      this.queryParams.deptManagerSubmitMark = true
    } else if (this.$auth.hasRole('partLeader')) {
      this.role = 'partLeader'
      this.queryParams.performanceOfficeSubmitMark = true
    } else if (this.$auth.hasRole('leadershipGroup')) {
      this.role = 'leader'
      this.queryParams.partLeaderSubmitMark = true
    }
    ;(async () => {
      this.handleYearChange(new Date().getFullYear())
      if (this.role === 'cadre') {
        this.getList()
      } else {
        await this.getDeptTree()
      }
    })()
  },
  methods: {
    checkRole,
    checkInputVisible(type) {
      switch (this.role) {
        case 'cadre':
          return !this.tableForm.personalSubmitMark
        case 'dept':
          return !this.tableForm.deptManagerSubmitMark
        case 'jxb':
          return !this.tableForm.performanceOfficeSubmitMark
        case 'partLeader':
          return !this.tableForm.partLeaderSubmitMark
        case 'leader':
          return !this.tableForm.finalMark
      }
    },
    handleSaveOrSubmit(operation) {
      let markItem = {}
      let mark = false
      if (operation === 'submit') mark = true
      switch (this.role) {
        case 'cadre':
          markItem.personalSubmitMark = mark
          break
        case 'dept':
          markItem.deptManagerSubmitMark = mark
          break
        case 'jxb':
          markItem.performanceOfficeSubmitMark = mark
          break
        case 'partLeader':
          markItem.partLeaderSubmitMark = mark
          break
        case 'leader':
          markItem.finalMark = mark
          break
      }

      let params = { ...this.tableForm, ...markItem }
      edit(params).then(res => {
        if (operation === 'save') {
          this.$modal.msgSuccess('已保存')
        } else if (operation === 'submit') {
          this.$modal.msgSuccess('已提交')
        }
        this.handleRefresh()
      })
    },
    handleRefresh() {
      this.getList()
    },
    getList() {
      this.tableLoading = true
      listTable(this.queryParams)
        .then(res => {
          this.tableForm = res.data || {}
          this.tableLoading = false
          if (this.tableForm.id) {
            if (!this.tableForm.partLeaderAuditDate) this.tableForm.partLeaderAuditDate = dayjs().format('YYYY-MM-DD')
            if (!this.tableForm.mainLeaderAuditDate) this.tableForm.mainLeaderAuditDate = dayjs().format('YYYY-MM-DD')
          }
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    /** 查询站办所下拉树结构 */
    async getDeptTree() {
      await deptTreeSelect().then(response => {
        this.deptOptions = this.removeEmptyChildren(response.data)
        this.queryParams.deptId = this.deptOptions[0].deptId
        this.getCivilList()
      })
    },
    getCivilList() {
      this.civilOptions = []
      this.queryParams.civilServantId = ''
      listCivil({ deptId: this.queryParams.deptId, assessmentMark: true }).then(res => {
        this.civilOptions = res.rows.map(item => {
          return { label: item.name, value: item.id }
        })
        this.queryParams.civilServantId = this.civilOptions[0].value
        this.getList()
      })
    },
    // 选择站办所
    handleDeptChange() {
      this.getCivilList()
      this.$refs.CascaderRef.dropDownVisible = false
    },
    // 年度选择
    handleYearChange(year) {
      this.queryParams.year = year
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year)
      this.quarterOptions = quarterList
      this.handleQuarterChange(quarter)
    },
    // 季度选择
    handleQuarterChange(quarter) {
      this.queryParams.quarter = quarter
      if (this.checkRole(['cadre'])) {
        this.getList()
      } else {
        if (this.queryParams.civilServantId) this.getList()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  min-width: 1200px;
}
.table-container {
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
  padding: 30px 25px;
  box-sizing: border-box;
  min-width: 1000px;
  max-width: 1800px;
  .table-title {
    font-size: 28px;
    font-weight: bold;
  }
  table {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #333;
    border-collapse: collapse;

    tr {
      td {
        border: 1px solid #333;
        width: 25%;
        padding: 20px;
        box-sizing: border-box;
        ul {
          margin: 0;
          padding: 0;
          list-style-type: none;
          text-align: left;
        }
      }
    }
  }
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
::v-deep .number-input {
  width: auto !important;
}
::v-deep .number-input .el-input__inner {
  padding: 0 5px;
  border: none;
  border-bottom: 1px solid;
  border-radius: 0;
  text-align: center;
  width: 50px;
  height: auto;
  line-height: normal;
}
::v-deep .date-input .el-input__inner {
  border: none;
}

::v-deep .el-date-editor.el-input {
  width: 150px;
}
</style>
